<template>
  <XtxBread>
    <XtxBreadItem to="/">首页</XtxBreadItem>
    <XtxBreadItem v-if="obj.top_id">{{ obj.top_name }}</XtxBreadItem>
    <Transition name="fade-right" mode="out-in">
      <XtxBreadItem v-if="obj.sub_id" :key="obj.sub_id">{{
        obj.sub_name
      }}</XtxBreadItem>
    </Transition>
  </XtxBread>
</template>

<script>
import { computed } from 'vue-demi'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: 'subBread',
  setup () {
    const route = useRoute()
    const store = useStore()

    const obj = computed(() => {
      let temp = {}
      store.state.category.list.forEach(item => {
        item.children &&
          item.children.forEach(sub => {
            if (sub.id === route.params.id) {
              temp = {
                top_id: item.id,
                top_name: item.name,
                sub_id: sub.id,
                sub_name: sub.name
              }
            }
          })
      })
      return temp
    })
    // console.log(objList)log

    return { obj }
  }
}
</script>

<style></style>
